<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <input type="text" placeholder="存储的键" v-model.trim="key">
      <input type="text" placeholder="存储的值" v-model.trim="value">
      <input type="text" placeholder="超期时长(ms)" v-model.number="overtime">
    </div>

    <br />

    <button :disabled="!key || !value" @click="onSetStorage">存储数据</button>
    <button :disabled="!key" @click="onGetStorage">获取数据</button>
    <button @click="getStorageInfo">获取存储数据信息</button>
    <button @click="clearStorage">清除带缓存的数据</button>
    <button @click="originMethods">原方法</button>
  </div>
  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
  <script type="module">
    import LocalstorageOperate from "./lib/bundle.esm.js";
    import * as Vue from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

    console.log("Vue: ", Vue);
    const { createApp, ref } = Vue;
    const overtime = 5000;

    // web 平台, 数据默认超时 5000ms
    const instance = new LocalstorageOperate("web", overtime);

    // 开启定时清除缓存(根据数据超时时间(5000ms)自动清理超时数据)
    // const instance = new LocalstorageOperate("web", 5000, true);

    createApp({
      data() {
        return {
          key: "",
          value: "",
          overtime,
        }
      },
      methods: {
        // 存储数据
        onSetStorage() {
          // 可以不指定时长, 这样就是默认时长, 存储的值可以是对象
          instance.setStorage(this.key, this.value, this.overtime).then(() => {
            console.log("async success");
          }).catch(err => {
            console.log("async err: ", err);
          });

          // 第三个参数设置超时时间
          instance.setStorage(this.key, this.value, this.overtime, (err) => {
            if (err) {
              console.log("callback error: ", err);
              return;
            }
            console.log("callback success");
          });
        },
        // 获取数据
        onGetStorage() {
          instance.getStorage(this.key)
            .then(res => {
              console.log("async res: ", res);
            }).catch(err => {
              if (err.flog === LocalstorageOperate.OVERTIME) {
                // 数据已超时
                console.log(err);
              } else if (err.flog === LocalstorageOperate.VOID) {
                // 不存在对应的数据
                console.log(err);
              } else {
                console.log("其他错误: ", err);
              }
            });

          instance.getStorage(this.key, (err, res) => {
            if (err) {
              if (err.flog === LocalstorageOperate.OVERTIME) {
                // 数据已超时
                console.log(err);
              } else if (err.flog === LocalstorageOperate.VOID) {
                // 不存在对应的数据
                console.log(err);
              } else {
                console.log("其他错误: ", err);
              }
              return;
            }
            console.log("callback res: ", res);
          });
        },
        async getStorageInfo() {
          // 缓存数据的key
          const cacheKeys = await instance.getCatchDataKey();
          console.log("缓存数据的key: ", cacheKeys);
          console.log("-".repeat(60));

          // 缓存缓存信息, 类型是: { key: string, value: string }[]
          const { cache, origin } = await instance.getStorageInfo();
          console.log("带缓存的数据: ", cache);
          console.log("其他的数据: ", origin);
        },
        async clearStorage() {
          // 删除数据
          // await instance.removeStorage()

          // 清除缓存超时的缓存
          // await instance.clearOvertimeData()

          // 清空缓存的数据
          await instance.clearDateStorage()
          console.log("async success");

          // 清空所有的数据
          // await instance.clearStorage()
        },

        // 效果同对应的 api(没有缓存的效果)
        originMethods() {

          instance.setStorageSync(this.key, this.value);
          // -> localStorage.setItem();

          let value = instance.getStorageSync(this.key);
          // -> localStorage.getItem();
          console.log(`key: ${this.key}, value: ${value}`);

          instance.removeStorageSync(this.key);
          // -> localStorage.removeItem();

          value = instance.getStorageSync(this.key);
          console.log(`key: ${this.key}, value: ${value}`);

          // instance.clearStorageSync();
          // -> localStorage.clear();
        }
      }
    }).mount("#app");


  </script>
</body>

</html>